body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea {font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var {font-style:normal; }
code, kbd, pre, samp {font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea {font-size:100%; }
table { border-collapse:collapse;border-spacing:0; }

body{
    background: gray;
    overflow: hidden!important;
    width: 100%;
    height: 100%;
}
.myul{
    position: relative;
}

.myul>li{
    width: 340px;
    height: 500px;
    background: white;
    position: absolute;
    box-shadow: 0 0 15px black;
    transform-style: preserve-3d;
    perspective: 800px;
}
.myul>li.active{
    transform: rotateY(180deg)
}

.myul>li> .zm{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateZ(1px)
}


.myul>li> .zm >img{
    width: 260px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 90px;
    transform: translateX(-50%);
}

.myul .zm .textNode{
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 30px;
    color: #4d544d;
}

.myul>li>.bm{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateZ(-1px) rotateY(180deg);
    text-align: center;
}

.myol{position: absolute;left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 999;}
.myol>li{
    width: 14px;
    height: 14px;
    float: left;
    background: #007d77;
    border-radius: 50%;
    margin: 0 16px;
    cursor: pointer;
    transition: 0.7s;
}

.myol>li.active{
    transform: scale(2) rotateY(180deg);
}

.myol>li.bactive{
    transform: scale(2) rotateY(360deg); background: yellow;
}